<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bootstrap, from Twitter</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link href="css/bootstrap.css" rel="stylesheet">
		<style>
			body {

			}
			#map_canvas {
				height: 600px;
				max-width: none;
			}
			#map_canvas img {
				max-width: none;
			}
		</style>
		<link href="css/bootstrap-responsive.css" rel="stylesheet">

		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Le fav and touch icons -->
		<link rel="shortcut icon" href="../assets/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
	</head>
	<body onload="initialize();">

		<div class="container">

			<h1>Prova de mapes.</h1>
			<form class="form-search">
				<input type="text" class="input-medium" id="term1" value="castellar">
				<input type="text" class="input-medium" id="term2" value="terrassa">
				<button type="button" class="btn" id="target">
					Search
				</button>
			</form>
			<div class="row show-grid">
				<div id="map_canvas" class="span12"></div>
			</div>
			<div class="row show-grid">
				<div id="map_Ruta" class="span12"></div>
			</div>

		</div>
		<!-- /container -->

		<!-- Le javascript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

		<script type="text/javascript">
			var directionDisplay;
			var directionsService = new google.maps.DirectionsService();
			var map;
			function initialize() {
				directionsDisplay = new google.maps.DirectionsRenderer();
				var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
				var myOptions = {
					zoom : 4,
					center : myLatlng,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				}

				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

				var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 'sandstone rock formation in the southern part of the ' + 'Northern Territory, central Australia. It lies 335 km (208 mi) ' + 'south west of the nearest large town, Alice Springs; 450 km ' + '(280 mi) by road. Kata Tjuta and Uluru are the two major ' + 'features of the Uluru - Kata Tjuta National Park. Uluru is ' + 'sacred to the Pitjantjatjara and Yankunytjatjara, the ' + 'Aboriginal people of the area. It has many springs, waterholes, ' + 'rock caves and ancient paintings. Uluru is listed as a World ' + 'Heritage Site.</p>' + '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>' + '</div>' + '</div>';

				var infowindow = new google.maps.InfoWindow({
					content : contentString
				});

				var marker = new google.maps.Marker({
					position : myLatlng,
					map : map,
					title : "Uluru (Ayers Rock)"
				});

				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});
				
				
					var marker2 = new google.maps.Marker({
					position : new google.maps.LatLng(-25.363860, 131.044920),
					map : map,
					title : "turu (Ayers Rock)"
				});

				google.maps.event.addListener(marker2, 'click', function() {
					infowindow.open(map, marker2);
				});
			}

			//calcula la ruta que s'indica en els textbox
			function calcRoute() {

				var start = document.getElementById("term1").value;
				var end = document.getElementById("term2").value;
				//alert("I am an alert box!");
				var request = {
					origin : start,
					destination : end,
					unitSystem : google.maps.DirectionsUnitSystem["METRIC"],

					travelMode : google.maps.DirectionsTravelMode.DRIVING
				};
				directionsService.route(request, function(response, status) {
					if (status == google.maps.DirectionsStatus.OK) {

						var mystr = "";
						var aux;

						for (var i in response.routes) {
							var mylegs = response.routes[i].legs
							for (var j in mylegs) {
								mystr += mylegs[j].distance.text;
								mystr += " " + mylegs[j].duration.text + " <br/>";
								mystr += " origen " + mylegs[j].start_location + " <br/>";
								aux = mylegs[j].start_location;
								mystr += " desti " + mylegs[j].end_location + " <br/>";
								mystr += " adresa " + mylegs[j].end_address + " <br/>";
							}
							mystr += "<br/>";
							$("#map_Ruta").html(mystr);

							//alert(aux.lng());
						}

						//jQuery.parseJSON(data1)

						directionsDisplay.setDirections(response);
						directionsDisplay.setMap(map);
						directionsDisplay.setPanel($("#map_Ruta").get(0));
						//directionsDisplay.setPanel($("#map_Ruta"));
						//retornar(aux);
					}

				});

			}

			/*function retornar(obj) {//FA LA CRIDA CAP AL PHP

			 //alert('Alert retornar: '+ obj.lat() + obj.lng());
			 var lat = obj.lat();
			 var lon = obj.lng();

			 $.post("provaMaps2.php", {
			 nom : lat,
			 nom1 : lon
			 }, function(data) {
			 //alert("Data Loaded: " + data);

			 var cad1 = jQuery.parseJSON(data);
			 //alert("Data Loaded: " + data);

			 for(var i = 0; i < cad1.length; i++) {

			 var myLatLng = new google.maps.LatLng(cad1[i].lat, cad1[i].lon);
			 var beachMarker = new google.maps.Marker({
			 position : myLatLng,
			 map : map

			 });

			 }

			 });
			 }*/

		</script>
	</body>
</html>

